<template>
	<div class="NavigationRight-body">
		<div class="color" @click="toggleColor()">
			
		</div>
		<button class="NavigationRight-btn" @click="login()" :disabled="name!=='登录'">
			{{name}}
		</button>
	</div>
	
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		useRouter
	} from 'vue-router';
	import { useColorState } from '../util/colorState.js';

	const router = useRouter();
	const name = ref("登录");
	const { isShowColor, toggleColor } = useColorState();

	function login() {
		router.push('/login');
	}

	onMounted(() => {
		const userDataStr = sessionStorage.getItem("user");
		if (userDataStr) {
			try {
				// 将字符串解析为对象
				const userData = JSON.parse(userDataStr);
				// 假设 userData 是一个对象，从中获取 username
				const username = userData?.userName;
				if (username) {
					console.log('获取到的用户名:', username);
					name.value = username;
					// 你可以在这里根据需求进行其他操作，比如更新组件的状态等
				}
			} catch (error) {
				console.error('解析 sessionStorage 数据出错:', error);
			}
		}
	})
</script>

<style lang="scss" scoped>
	* {
		margin: 0px;
		padding: 0px;
		border: none;
		border-radius: 0px;
		font-size: 14px;
		font-weight: 300px;
	}

	.NavigationRight-body {
		/* width: 1888px; */
		width: 100%;
		max-width: 756px;
		min-width: 100px;
		height: 50px;
		max-width: 1000px;
		display: flex;
		justify-content: flex-end;
		position: relative;

		.color {
			width: 30px;
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: url("../../../img/color.svg");
			background-repeat: no-repeat;
			background-size: cover;
			margin:10px 20px;
			cursor: pointer;
		}

		.NavigationRight-btn {
			width: 50px;
			height: 50px;
			background-color: #fff;
			/*#000*/
			color: #000;
			/*fff*/
			cursor: pointer;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.NavigationRight-btn:hover {
			color: var(--primary-color);
		}
	}
</style>